iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0
Modern Web

React 學得動嗎系列 第 6

[Day 6] React狀態提升:優化組件間的資料流動

  • 分享至 

  • xImage
  •  

歡迎來到我們第六天的React學習!今天,我們來聊聊一個重要的React概念:狀態提升(Lifting State Up)。這個概念可能聽起來有點抽象,我們來用簡單的比喻和實際的例子來解釋它。

什麼是狀態提升?

想像一下,如果React組件是一個大家庭的成員,那麼狀態就像是他們之間共享的重要信息。有時候,這些信息需要在不同的家庭成員之間流動和共享。狀態提升就是將這些共享的信息"提升"到一個共同的長輩(父組件)那裡統一管理的過程。

為什麼需要狀態提升?

在React應用中,我們經常需要多個組件共享和修改同一個狀態。如果讓每個組件單獨管理這個狀態,可能會導致資料不一致和管理困難。通過將狀態提升到共同的父組件,我們可以:

  1. 確保資料的一致性
  2. 簡化狀態管理
  3. 提高組件的可重用性

實際案例:訊息共享系統

讓我們通過一個簡單的訊息共享系統來理解狀態提升。我們將創建三個組件:MessageInput, MessageDisplay, 和 MessageCenter

import React, { useState } from 'react';
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

// 訊息輸入組件
const MessageInput: React.FC<{ onSendMessage: (message: string) => void }> = ({ onSendMessage }) => {
  const [input, setInput] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSendMessage(input);
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit} className="flex space-x-2">
      <Input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="輸入新訊息"
      />
      <Button type="submit">發送</Button>
    </form>
  );
};

// 訊息顯示組件
const MessageDisplay: React.FC<{ message: string }> = ({ message }) => (
  <div className="mt-4 p-4 bg-gray-100 rounded">
    <h3 className="font-bold">最新訊息:</h3>
    <p>{message || '尚無訊息'}</p>
  </div>
);

// 訊息中心組件
const MessageCenter: React.FC = () => {
  const [currentMessage, setCurrentMessage] = useState('');

  return (
    <div className="p-4 max-w-md mx-auto">
      <h2 className="text-2xl font-bold mb-4">React訊息中心</h2>
      <MessageInput onSendMessage={setCurrentMessage} />
      <MessageDisplay message={currentMessage} />
    </div>
  );
};

export default MessageCenter;

https://ithelp.ithome.com.tw/upload/images/20240920/20140358ZfJ3JcX7uj.png

讓我們來看這個訊息中心的運作機制:

  1. MessageCenter(訊息中心)

    • 這是我們的父組件,負責管理共享的狀態 currentMessage
    • 它將 setCurrentMessage 函數傳給 MessageInput,使其能夠更新訊息。
    • 同時,它將當前的訊息傳給 MessageDisplay 來展示。
  2. MessageInput(資料輸入)

    • 這個組件管理自己的本地狀態 input,用於控制輸入框。
    • 當表單提交時,它調用從父組件傳來的 onSendMessage 函數,將新的訊息傳遞上去。
  3. MessageDisplay(訊息顯示)

    • 這是一個簡單的展示組件,負責顯示當前的訊息。

通過這種方式,我們實現了狀態提升。共享的狀態 currentMessage 被提升到 MessageCenter 中,使得 MessageInputMessageDisplay 能夠協同工作,共享同一份數據。

狀態提升的好處

  1. 單一資料源:所有的訊息都來自一個地方,確保了資料的一致性。
  2. 集中管理:如果我們想要添加新功能,比如訊息歷史,我們只需要在 MessageCenter 中進行修改。
  3. 提高複用性MessageInputMessageDisplay 變得更加通用,可以在其他場景中輕鬆重用。

小結

今天,我們認識了React中的狀態提升概念,並通過一個實際的訊息共享系統來理解它的應用。當你的組件需要共享狀態時,考慮將這個狀態提升到它們最近的共同父組件中。這樣可以確保資料的一致性和組件結構更加清晰和可維護。


上一篇
[Day 5] 聊聊React Hooks
下一篇
[Day 7] React自定義Hooks:解鎖組件邏輯的重用之門
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言